<template>
  <draggable
      class="ant-list-items"
      :list="list"
      ghost-class="ghost"
      handle=".handle"
      item-key="id"
  >
    <template #item="{element}">
    <div class="ant-list-item"
        :class="{active: element.id === selectedId}"
         @click="handleClick(element.id)">
      <a-tooltip title="删除">
        <a-button shape="circle" @click.stop="handleRemove(element.id)">
          <DeleteOutlined />
        </a-button>
      </a-tooltip>
      <a-tooltip :title="element.isHidden ? '显示': '隐藏'">
        <a-button shape="circle" @click.stop="handleChange(element.id, 'isHidden', !element.isHidden)">
          <template v-slot:icon v-if="element.isHidden"><EyeOutlined /> </template>
          <template v-slot:icon v-else><EyeInvisibleOutlined /> </template>
        </a-button>
      </a-tooltip>
      <a-tooltip :title="element.isLocked ? '解锁' : '锁定'">
        <a-button shape="circle" @click.stop="handleChange(element.id, 'isLocked', !element.isLocked)">
          <template v-slot:icon v-if="element.isLocked"><UnlockOutlined /> </template>
          <template v-slot:icon v-else><LockOutlined /> </template>
        </a-button>
      </a-tooltip>
      <inline-edit class="edit-area"
                   :value="element.layerName"
                   @change="(value) => {handleChange(element.id, 'layerName', value)}"
      ></inline-edit>
      <a-tooltip title="拖动排序">
        <a-button shape="circle" class="handle">
          <DragOutlined />
        </a-button>
      </a-tooltip>
    </div>
    </template>
  </draggable>
</template>

<script lang="ts">
import {defineComponent, PropType} from 'vue'
import {ComponentData} from "@/types/editor.ts";
import { EyeOutlined, EyeInvisibleOutlined, LockOutlined,
  UnlockOutlined, DragOutlined,DeleteOutlined } from '@ant-design/icons-vue'
import InlineEdit from "@/components/InlineEdit.vue";
import draggable from "vuedraggable";

export default defineComponent({
  name: "LayerList",
  components: {
    InlineEdit,
    EyeOutlined,
    EyeInvisibleOutlined,
    LockOutlined,
    UnlockOutlined,
    DragOutlined,
    DeleteOutlined,
    draggable
  },
  props: {
    list: {
      type: Array as PropType<ComponentData[]>,
      required: true
    },
    selectedId: {
      type: String,
      required: false
    }
  },
  setup(props, ctx) {
    const handleClick = (id: string) => {
      ctx.emit('select', id)
    }
    const handleRemove = (id: string) => {
      ctx.emit('remove', id)
    }
    const handleChange = (id: string, key: string, value: any) => {
      const data = {
        id,
        key,
        value,
        isRoot: true
      }
      ctx.emit('change', data)
    }
    return {
      handleChange,
      handleRemove,
      handleClick
    }
  },
})
</script>

<style scoped>
.ant-list-item {
  display: flex;
  padding: 10px 15px;
  transition: all 0.5s ease-out;
  cursor: pointer;
  justify-content: normal;
  border: 1px solid #fff;
  border-radius: 5px;
  border-bottom-color: #f0f0f0;
}
.ant-list-item.active {
  border: 1px solid #1890ff;
}
.ant-list-item.ghost {
  opacity: .5;
}

.ant-list-item:hover {
  background: #e6f7ff;
}
.ant-list-item > * {
  margin-right: 10px;
}
.ant-list-item button {
  font-size: 12px;
}

.ant-list-item .handle {
  cursor: move;
  margin-left: auto;
}
.ant-list-item .edit-area {
  width: 100%;
}
</style>